<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>答题页面</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/style.min.css}">
    <style>
        .exam-container {
            padding: 20px;
        }
        .timer {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #f8f9fa;
            padding: 10px 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            z-index: 1000;
        }
        .question-card {
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
        }
        .answer-sheet {
            position: fixed;
            right: 20px;
            bottom: 20px;
            background: #fff;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            z-index: 1000;
        }
        .answer-sheet .question-number {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
            cursor: pointer;
        }
        .answer-sheet .question-number.answered {
            background: #28a745;
            color: #fff;
            border-color: #28a745;
        }
        .answer-sheet .question-number.current {
            background: #007bff;
            color: #fff;
            border-color: #007bff;
        }
        .submit-btn {
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body class="gray-bg">
    <div class="timer">
        <h4>剩余时间：<span id="countdown">00:00:00</span></h4>
    </div>

    <div class="exam-container">
        <div class="row">
            <div class="col-sm-9">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5 th:text="${examPaper.name}">试卷名称</h5>
                        <input type="hidden" id="paperId" th:value="${examPaper.paperId}">
                    </div>
                    <div class="ibox-content">
                        <!-- 单选题 -->
                        <div class="question-section" th:if="${not #lists.isEmpty(radioQuestions)}">
                            <h4>一、单选题</h4>
                            <div class="question-card" th:each="question,stat : ${radioQuestions}">
                                <p th:text="${stat.count} + '. ' + ${question.questionBody}">题目内容</p>
                                <div class="options">
                                    <div class="radio" th:each="option : ${question.options}">
                                        <label>
                                            <input type="radio" th:name="'radio_' + ${question.paperLibId}" 
                                                   th:value="${option.options}" th:data-question-id="${question.paperLibId}">
                                            <span th:text="${option.content}">选项内容</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 多选题 -->
                        <div class="question-section" th:if="${not #lists.isEmpty(checkboxQuestions)}">
                            <h4>二、多选题</h4>
                            <div class="question-card" th:each="question,stat : ${checkboxQuestions}">
                                <p th:text="${stat.count} + '. ' + ${question.questionBody}">题目内容</p>
                                <div class="options">
                                    <div class="checkbox" th:each="option : ${question.options}">
                                        <label>
                                            <input type="checkbox" th:name="'checkbox_' + ${question.paperLibId}" 
                                                   th:value="${option.options}" th:data-question-id="${question.paperLibId}">
                                            <span th:text="${option.content}">选项内容</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 不定项题 -->
                        <div class="question-section" th:if="${not #lists.isEmpty(indefiniteQuestions)}">
                            <h4>三、不定项题</h4>
                            <div class="question-card" th:each="question,stat : ${indefiniteQuestions}">
                                <p th:text="${stat.count} + '. ' + ${question.questionBody}">题目内容</p>
                                <div class="options">
                                    <div class="checkbox" th:each="option : ${question.options}">
                                        <label>
                                            <input type="checkbox" th:name="'indefinite_' + ${question.paperLibId}" 
                                                   th:value="${option.options}" th:data-question-id="${question.paperLibId}">
                                            <span th:text="${option.content}">选项内容</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 主观题 -->
                        <div class="question-section" th:if="${not #lists.isEmpty(subjectiveQuestions)}">
                            <h4>四、主观题</h4>
                            <div class="question-card" th:each="question,stat : ${subjectiveQuestions}">
                                <p th:text="${stat.count} + '. ' + ${question.questionBody}">题目内容</p>
                                <div class="form-group">
                                    <textarea class="form-control" th:name="'subjective_' + ${question.paperLibId}" 
                                              rows="5" th:data-question-id="${question.paperLibId}"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="submit-btn">
                            <button type="button" class="btn btn-primary" onclick="submitExam()">提交试卷</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="answer-sheet">
        <h5>答题卡</h5>
        <div class="question-numbers">
            <!-- 单选题答题卡 -->
            <div th:if="${not #lists.isEmpty(radioQuestions)}">
                <h6>单选题</h6>
                <div th:each="question,stat : ${radioQuestions}">
                    <span class="question-number" th:text="${stat.count}" 
                          th:data-question-id="${question.paperLibId}" 
                          th:data-type="radio"></span>
                </div>
            </div>
            <!-- 多选题答题卡 -->
            <div th:if="${not #lists.isEmpty(checkboxQuestions)}">
                <h6>多选题</h6>
                <div th:each="question,stat : ${checkboxQuestions}">
                    <span class="question-number" th:text="${stat.count}" 
                          th:data-question-id="${question.paperLibId}" 
                          th:data-type="checkbox"></span>
                </div>
            </div>
            <!-- 不定项题答题卡 -->
            <div th:if="${not #lists.isEmpty(indefiniteQuestions)}">
                <h6>不定项题</h6>
                <div th:each="question,stat : ${indefiniteQuestions}">
                    <span class="question-number" th:text="${stat.count}" 
                          th:data-question-id="${question.paperLibId}" 
                          th:data-type="indefinite"></span>
                </div>
            </div>
            <!-- 主观题答题卡 -->
            <div th:if="${not #lists.isEmpty(subjectiveQuestions)}">
                <h6>主观题</h6>
                <div th:each="question,stat : ${subjectiveQuestions}">
                    <span class="question-number" th:text="${stat.count}" 
                          th:data-question-id="${question.paperLibId}" 
                          th:data-type="subjective"></span>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/layer/layer.js}"></script>
    <th:block th:include="include :: footer" />
    <script type="text/javascript">
        var prefix = ctx + "jxsx/paper";
        var drugn=0;
        // 倒计时功能
        var duration = [[${duration}]] * 60; // 转换为秒
        var countdown = setInterval(function() {
            var hours = Math.floor(duration / 3600);
            var minutes = Math.floor((duration % 3600) / 60);
            var seconds = duration % 60;
            drugn++;
            document.getElementById('countdown').innerHTML = 
                (hours < 10 ? '0' + hours : hours) + ':' +
                (minutes < 10 ? '0' + minutes : minutes) + ':' +
                (seconds < 10 ? '0' + seconds : seconds);
            
            if (--duration < 0) {
                clearInterval(countdown);
                submitExam();
            }
        }, 1000);

        // 答题卡功能
        $(document).ready(function() {
            // 监听答案变化
            $('input[type="radio"], input[type="checkbox"], textarea').change(function() {
                var questionId = $(this).data('question-id');
                var questionNumber = $('.question-number[data-question-id="' + questionId + '"]');
                questionNumber.addClass('answered');
            });

            // 答题卡点击跳转
            $('.question-number').click(function() {
                var questionId = $(this).data('question-id');
                var type = $(this).data('type');
                var questionElement;
                
                if (type === 'radio') {
                    questionElement = $('input[name="radio_' + questionId + '"]').closest('.question-card');
                } else if (type === 'checkbox') {
                    questionElement = $('input[name="checkbox_' + questionId + '"]').closest('.question-card');
                } else if (type === 'indefinite') {
                    questionElement = $('input[name="indefinite_' + questionId + '"]').closest('.question-card');
                } else if (type === 'subjective') {
                    questionElement = $('textarea[name="subjective_' + questionId + '"]').closest('.question-card');
                }
                
                if (questionElement.length) {
                    $('html, body').animate({
                        scrollTop: questionElement.offset().top - 100
                    }, 500);
                }
            });
        });

        // 提交试卷
        function submitExam() {
             debugger;
            var answers = {};
            
            // 收集单选题答案
            $('input[type="radio"]:checked').each(function() {
                var questionId = $(this).data('question-id');
                answers[questionId] = $(this).val();
            });
            
            // 收集多选题答案
            $('input[type="checkbox"]:checked').each(function() {
                var questionId = $(this).data('question-id');
                if (!answers[questionId]) {
                    answers[questionId] = [];
                }
                answers[questionId].push($(this).val());
            });
            
            // 收集主观题答案
            $('textarea').each(function() {
                var questionId = $(this).data('question-id');
                if ($(this).val().trim()) {
                    answers[questionId] = $(this).val();
                }
            });
           var paperId =$("#paperId").val();
            // 提交答案
            $.ajax({
                url: prefix + '/submit',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    paperId: paperId,
                    userId: [[${userId}]],
                    answers: answers,
                    duration:drugn
                }),
                success: function(result) {
                    if (result.code == 200) {
                        layer.msg('提交成功', {icon: 0});
                        setTimeout(function() {
                            window.location.href = prefix ;
                        }, 1500);
                    } else {
                        layer.msg(result.msg, {icon: 2});
                    }
                },
                error: function() {
                    layer.msg('提交失败，请重试', {icon: 2});
                }
            });
        }
    </script>
</body>
</html> 